<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>选择工种和技能级别</title>
  <link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
  <link rel="stylesheet" type="text/css" href="../css/common.css"/>
  <link rel="stylesheet" href="../css/page_css/util.css">
</head>
<body>
  <div class="mui-content">
    <ul class="mui-table-view01">
			 <li class="search-cell">
			 	<div class="mui-input-row mui-search">
					<input type="search" id="searchText" class="mui-input-clear" placeholder="请输入工种描述" ><span class="mui-icon mui-icon-clear mui-hidden"></span><span class="mui-placeholder"><span></span></span>
				</div>
				<div class="mui-btn mui-btn-primary" onclick="Search()">
					搜索
				</div>
			 </li>
		</ul>
    <ul class="mui-table-view" id="mui-table-view">
      <!-- 模板引擎 -->
    </ul>

  </div>
  <script type="text/javascript" src="../script/api.js"></script>
  <script src="../script/mui.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="../script/common.js" type="text/javascript" charset="utf-8"></script>
  <script src="../script/template.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/template" id="tmpList">
    {{each datas as item }}
      <li class="mui-table-view-cell mui-radio mui-left">
        <input name="sel_property_radio" type="radio" onchange="chLevel('{{item.craft}}','{{item.skilllevel}}','{{item.description}}','{{item.standardrate}}')">
        <div class="list_item">
          <div class="flex_center_between">
            <p class="flex_first">
              <label for="" class="no-padding width_auto">工种:&nbsp;&nbsp;</label>
              <span>{{item.craft}}</span>
            </p>
            <p class="flex_first">
              <label for="" class="no-padding width_auto">技能级别:&nbsp;&nbsp;</label>
              <span>{{item.skilllevel}}</span>
            </p>
          </div>
          <div class="flex_center_between">
            <p class="flex_first">
              <label for="" class="no-padding width_auto">描述:&nbsp;&nbsp;</label>
              <span>{{item.description}}</span>
            </p>
            <p class="flex_first">
              <label for="" class="no-padding width_auto">标准费率:&nbsp;&nbsp;</label>
              <span>{{item.standardrate}}</span>
            </p>
          </div>
        </div>
      </li>
    {{/each}}
  </script>
  <script>
  var searchText = $api.val($api.byId('searchText'));
  var loadEnd = false;
  var page = 1;
  var craft,skilllevel,description,standardrate;
  apiready = function(){
    onLoadData(page,false)
    scrollToBottomHandler(function() {
      if (!loadEnd) { // 未到最后一页
        page++;
        onLoadData(page,true);
      } else { // 告诉到底了
        EndToast('到底了');
      }
    })
    Refresh(function() {
      loadEnd = false;
      page = 1;
      onLoadData(page,false);
    });
    api.addEventListener({
      name:'navitembtn'
    },function(ret, err){
        if(ret.type == 'right'){
          if($api.dom("input[type='radio']:checked") == null){
            api.toast({
              msg: '请选择一项!',
              duration: 2000,
              location: 'middle'
            });
            return false
          }
          api.sendEvent({
            name: 'selLevel',
            extra: {
              craft : craft,
              skilllevel : skilllevel,
              description : description,
              standardrate : standardrate
            }
          });
          setTimeout(function(){
            api.closeWin();
          },100)
        }
    })
  }
  function onLoadData(page,load){
   ajaxrd("selectCraftLevel",{
     description: searchText,
     pageNo: page,
     pageSize: 10
   },function(data){
     AddData('tmpList','mui-table-view', data, load);
   })
  }
  function chLevel(id, name, desc,rate) {
    craft = id;
    skilllevel = name;
    description = desc;
    standardrate = rate;
  }
  </script>
</body>
</html>
